<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .p1 {
            /* pre开头代表显示原生 */
            /* 带有wrap代表换行 */
            white-space: pre-line;

        }

        .p2 {
            direction: unset
        }

        .p3 {
            border: 1px solid red;
            width: 400px;
            height: 100px;
            /* text-overflow: clip; */
            /* 文字不换行 */
            white-space: nowrap;
            /* 超出的部分隐藏 */
            overflow: hidden;
            /* 超出的文本加上省略号 */
            text-overflow: ellipsis;
            display: -webkit-box;
        }

        .p4 {
            border: 1px solid red;
            width: 300px;
            height: 100px;
            display: -webkit-box;
            /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-line-clamp: 5;
            /*限制在一个块元素显示的文本的行数 */
            overflow: hidden;
            /*超出的内容就隐藏 */
        }
    </style>

</head>

<body>
    <p class="p1">
        和“word-spacing”有所不同， 该属性是用于控制字符 间的间和“word-spacing”有所不同， 该属性是用于控制字符 间的间和“word-spacing”有所不同， 该属性是用于控制字符 间的间

        距。
        一个字母，一个汉字，甚至一个
        空格都是一个字符
    </p>
    <p class="p2">
        在有些国家，如：“阿拉伯”、“伊朗”、“以色列”，还有古典的“中日韩”文等等，他们的文字显示方向都是从右向左的，为了适应这些文字方向的需求，如果用手工去设置，耗费的时间成本会过高，也非常容易出错，这个时候“direction”属性会帮你克服这个问题。该属性有两个值：
    </p>

    <p class="p3">
        在有些国家，如：“阿拉伯”、“伊朗”、“以色列”，还有古典的“中日韩”文等等，他们的文字显示方向都是从右向左的，为了适应这些文字方向的需求，如果用手工去设置，耗费的时间成本会过高，也非常容易出错，这个时候“direction”属性会帮你克服这个问题。该属性有两个值：
    </p>
    <p class="p4">
        在有些国家，如：“阿拉伯”、“伊朗”、“以色列”，还有古典的“中日韩”文等等，他们的文字显示方向都是从右向左的，为了适应这些文字方向的需求，如果用手工去设置，耗费的时间成本会过高，也非常容易出错，这个时候“direction”属性会帮你克服这个问题。该属性有两个值：
    </p>

</body>

</html>